<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title></title>
	<script src="/static/js/vue.min.js"></script>
	<script src="/static/js/jquery-3.2.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/static/css/builders.css"/>
</head>
<body>
	<div class="head">
		<p>基础信息<span onclick="reset({$advData.device_id})"><!--<img src="/static/img/reset.png" alt="" id="reseticon"></span>--></p>
	</div>
	<div id="app">
		<div class="content">
			<div class="contentitem">
				<table>
				<tr><td>设备ID</td><td><span>{$advData.device_id}</span></td></tr>
				<tr><td>广告牌名称</td><td><input type="text" v-model="name"/></td></tr>
				<tr>
					<td>设备类型</td>
					<td>
						<select v-model="device_type.selected">
							<option  v-for="(item,index) in device_type.arr" >{{item}}</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>供网方式</td>
					<td>
						<select v-model="network.selected">
							<option  v-for="(item,index) in network.arr" >{{item}}</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>wifi共享方式</td>
					<td>
						<select v-model="wifi.selected">
							<option  v-for="(item,index) in wifi.arr" >{{item}}</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>广告位类型</td>
					<td>
						<select v-model="type.selected">
							<option  v-for="(item,index) in type.arr" >{{item}}</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>广告位通电情况</td>
					<td>
						<select v-model="power_state.selected">
							<option  v-for="(item,index) in power_state.arr" >{{item}}</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>外壳类型</td>
					<td>
						<select v-model="shell_type.selected">
							<option  v-for="(item,index) in shell_type.arr" >{{item}}</option>
						</select>
					</td>
				</tr>
				</table>
				<div class="conbtn">
					<button @click="change">修改</button>
				</div>
			</div>
			<div class="contentitem">
				<div class="conbtn">
					<button @click="reset('mac')">mac更新</button>
				</div>
				<table>
				<tr>
					<td>mac地址</td>
					<td>采集时间</td>
				</tr>
				<div class="none" v-if="deviceList.length == 0">暂无数据</div>
				<tr  v-for=" i in deviceList" v-if="deviceList.length != 0">
					<td>{{ i.mac }}</td>
					<td>{{ i.collect_time}}</td>
				</tr>
				</table>
			</div>
			<div class="contentitem">
				<div class="conbtn">
					<button @click="reset('temp')">温度更新</button>
				</div>
				<table>
				<tr>
					<td>温度</td>
					<td>采集时间</td>
				</tr>
				<div class="none" v-if="tempList.length == 0">暂无数据</div>
				<tr  v-for=" i in tempList" v-if="tempList.length != 0">
					<td>{{ i.temp }}°C</td>
					<td>{{ i.add_time}}</td>
				</tr>
				</table>
        <div class="fenbtn">
        <button @click="changewen(0)" >首页</button>
        <button @click="changewen(-1)" :disabled="disabled">上一页</button>
        <button @click="changewen(1)">下一页</button>
        </div>
			</div>
			<div class="contentitem" v-show="camera">
				<div class="picfoot">
					<button @click="getpic">抓拍图片</button>
				</div>
				<div class="pichead">
					<progress :value="progress" max="100"></progress><span>{{progress}}</span>
				</div>
				<div class="none" v-show="ossList.length == 0">暂无数据</div>
				<div class="img" v-show ="ossList.length != 0">
					<div v-for="(item,index) in ossList" @click="gettrue(index)">
						<span>{{item.add_time}}</span>
						<img src="/static/img/true.png" alt="" class="true" v-if="trueindex == index"/>
						<img  :src="item.img_url" alt=""/>
					</div>
				</div>
				<div class="fenye" @click="getmore">
					<p>点击加载更多</p>
				</div>
				<div class="picfoot">
					<button @click="setpic">设置基准图片</button>
				</div>
			</div>
		<div class="propo" v-if="propo" @click="propo=!propo">
			<img :src="propoimg" alt="" />
		</div>
		</div>
	</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    seen: false,
    deviceList:[],
    tempList: [],
    ossList: [],
    time: [],
    time1: '',
    time2: '',
    page: 1,
    progress: 0,
    wenpage: 1,
    wentime1: 0,
    disabled: true,
    trueindex: null,
    loading: true,
    id:{$advData.device_id},
    camera: true,
    propo:false,
    propoimg:'',
    name: '',
    shell_type: {
    	arr: ['大射灯外壳', '射灯外壳分体式', '圆柱状射灯外壳', '塑料外壳'],
    	index: 0,
    	selected:''
    },
    power_state:{
    	arr: ['24小时直流供电', '晚上通电4小时', '太阳能蓄电池供电', '充电电池供电'],
    	index: 0,
    	selected:''
    },
    type: {
    	arr:['固定面立柱大牌', '三面翻立柱大牌', '候车亭灯箱', '地下停车场灯箱', '社区灯箱', '城市道路灯箱'],
    	index: 0,
    	selected:''
    },
    wifi: {
    	arr: ['MI-FI', '手机共享热点'],
    	index:0,
    	selected:''
    },
    network:{
    	arr: ['联通物联网卡', '移动物联网卡', '电信手机卡'],
    	index: 0,
    	selected:''
    },
    device_type:{
    	arr:  ['带摄像头' ,'不带摄像头'],
    	index: 0,
    	selected:''
    }
  },
  mounted:function(){
  	this.reset('all')
  	this.getprogress()
  },
  methods: {
  	reset:function(id){
  		var that=this
  		if(id == 'mac'){
  		$.ajax({
  			type:'post',
  			data:{'type': 'mac', 'id': this.id},
  			url: '/index/builder/Refresh',
  			async:true
  		}).then(function(res){
  			console.log(res)
  			if(res.success){
				that.deviceList = res.data.deviceList
  			}
  		})	
  		}else if(id == 'temp'){
  		$.ajax({
  			type:'post',
  			data:{'type': 'temp', 'id': this.id},
  			url: '/index/builder/Refresh',
  			async:true
  		}).then(function(res){
  			if(res.success){
  				that.tempList = res.data.tempList
          that.wentime1 = res.data.page.add_time
  			}
  		})  			
  		}else if(id == 'all'){
  		$.ajax({
  			type:'post',
  			data:{'type': 'all', 'id': this.id},
  			url: '/index/builder/Refresh',
  			async:true
  		}).then(function(res){
  			if(res.success){
  				that.time1 = res.data.page.add_time
          that.wentime1 = res.data.page.add_time
  				that.time2 = res.data.page.add_time
				  that.deviceList = res.data.deviceList
  				that.tempList = res.data.tempList
  				that.ossList = res.data.ossList
  				that.camera = res.data.advData.device_type==1?false: true
  				that.shell_type.index =res.data.advData.shell_type
  				that.shell_type.selected =that.shell_type.arr[that.shell_type.index]
  				that.type.index =res.data.advData.type
  				that.type.selected =that.type.arr[that.type.index]
  				that.wifi.index =res.data.advData.wifi
  				that.wifi.selected =that.wifi.arr[that.wifi.index]
  				that.power_state.index =res.data.advData.power_state
  				that.power_state.selected =that.power_state.arr[that.power_state.index]
  				that.network.index =res.data.advData.network
  				that.network.selected =that.network.arr[that.network.index]
  				that.device_type.index =res.data.advData.device_type
  				that.device_type.selected =that.device_type.arr[that.device_type.index]
  				that.name = res.data.advData.name
  			}
  		})   			
  		}
  	},
  	getmore:function(){
  		var that = this
  		this.page +=1 
  		$.ajax({
  			type: 'post',
  			data: {type:'oss',id:this.id,time:this.time1,page_index:this.page},
  			url:'/index/builder/Refresh',
  			async:true
  		}).then(function(res){
  			if(res.success){
  				for(var i=0;i<res.data.ossList.length;i++){
  					that.ossList.push(res.data.ossList[i])
  				}
  			}
  		})
  	},
  	getprogress:function(){
  		var that = this
  		var timer = setInterval(function(){
  		$.ajax({
  			type:'post',
  			data:{type:'hex',id:that.id},
  			url:'/index/builder/Refresh',
  			async:true
  		}).then(function(res){
  			if(res.success){
  				that.progress=parseInt(res.data.hex)
  			}
  			if(res.data.hex == 0&&that.loading == false){
  				that.loading = true
  				$.ajax({
  					type:"post",
  					url:"/index/builder/Refresh",
  					data: {type:"ossUP",id:that.id,time:that.time2},
  					async:true,
  				}).then(function(res){
 
  					 if(res.success){
  					  for(var i=0;i<res.data.ossList.length;i++){
  						that.ossList.unshift(res.data.ossList[i])
  						}
  					  that.time2 = res.data.time
  					}
  				});
  			}else if(res.data.hex != 0){
  				that.loading = false
  			}
  		})
  		}, 2000)
  	},
  	gettrue:function(index){
  		if(this.trueindex != index){
  			this.trueindex = index
  		}else{
  			this.trueindex = null
  		}
  		this.propo=true
  		this.propoimg=this.ossList[index].img_url
  	},
  	setpic:function(){
  		$.ajax({
  			type:"post",
  			url:"/index/builder/set_img_info",
  			data:{id:this.id,oss_id:this.ossList[this.trueindex].oss_id},
  			async:true
  		}).then(function(res){
  			if(res.success){
  				alert('设置成功')
  			}
  		});
  	},
  	getpic:function(){
  		$.ajax({
  			type:"post",
  			data:{id:this.id},
  			url:"http://common.bomeiyi.net/index/Camera/snapshot",
  			async:true
  		}).then(function(res){
  			if(res == 'ok'){
  				alert("抓拍成功")
  			}
  		});
  	},
  	change:function(){
  		var that =this
		$.ajax({
			type:'post',
			data:{
				name:that.name,
				device_id:that.id, 
				device_type:that.device_type.selected,
				network:that.network.selected,
				wifi:that.wifi.selected,
				power_state:that.power_state.selected,
				shell_type:that.shell_type.selected,
				type:that.type.selected
			},
			url:'/index/builder/save_adv_info',
			async: true
		}).then(function(res){
			if(res.success){
				alert("修改成功")
			}
		})
  	},
    changewen:function(id){
      if(id===0){
        this.wenpage = 1
      }else if(id === 1){
        this.wenpage += 1
      }else if(id === -1){
        this.wenpage -=1
      }
      var that = this
      $.ajax({
      type:'post',
      data:{'type': 'temp', 'id': this.id, 'time':this.wentime1 , 'page_index': this.wenpage,},
      url:'/index/builder/Refresh',
      async: true
    }).then(function(res){
      if(res.success){
        that.tempList = res.data.tempList
      }
    })
    }
  },
  watch:{
    wenpage:function(){
      if(this.wenpage<=1){
        this.disabled = true
      } else {
        this.disabled = false
      }
    }
  }
})
</script>
</html>